<template>
  <div class="container flex-row items-end justify-around">
    <div class="line d1"></div>
    <div class="line d3"></div>
    <div class="line d2"></div>
    <div class="line d4"></div>
  </div>
</template>

<script>
export default {
  name: "DanceLine"
}
</script>

<style scoped lang="scss">
.container{
  height: 15px;
  width: 15px;
  position: relative;
  top: -2px;
  margin: 0 2px;
}
.line{
  width: 1px;
  background-color: cornflowerblue;
  animation: add 2s infinite ;
}
.d1{
  animation-delay: 100ms;
}
.d2{
  animation-delay: 200ms;
}
.d3{
  animation-delay: 300ms;
}
.d4{
  animation-delay: 400ms;
}
@keyframes add {
  0%{
    height: 0;
  }
  25%{
    height: 75%;
  }
  50%{
    height: 25%;
  }
  75%{
    height: 100%;
  }
  100%{
    height: 0;
  }
}
</style>
